<template>
    <div class="wrapper">
        <div class="top">
            <div class="top__bgcolor"></div>
            <div class="top__header" @click="handleBack">
                <div class="iconfont top__header__back">&#xe697;</div>
                确认订单
            </div>
            <div class="top__receiver">
                <div class="top__receiver__title">收货地址</div>
                <div class="top__receiver__address">宁波市鄞州区宁波轨道交通天童庄车辆段(郡杨路52号)</div>
                <div class="top__receiver__info">
                    <span class="top__receiver__info__name">刘军（先生）</span>
                    <span class="top__receiver__info__phone">13845405064</span>
                </div>
                <div class="iconfont top__receiver__icon">&#xe697;</div>
            </div>
        </div>
        <div class="products">
        <div class="products__title">
            {{calculations.shopName}}
        </div>
        <div class="products__wrapper">
            <div class="products__list">
            <template
                v-for="item in calculations.notEmptyProductList"
                :key="item._id"
            >
                <div v-if="item.count > 0"  class="products__item">
                <img class="products__item__img" :src="item.imgUrl" />
                <div class="products__item__detail">
                    <h4 class="products__item__title">{{item.name}}</h4>
                    <p class="products__item__price">
                    <span>
                        <span class="products__item__yen">&yen;</span>
                        {{item.price}} x {{item.count}}
                    </span>
                    <span class="products__item__total">
                        <span class="products__item__yen">&yen;</span>
                        {{(item.price * item.count).toFixed(2)}}
                    </span>
                    </p>
                </div>
                </div>
            </template>
            </div>
            </div>
        </div>
        <div class="order">
            <div class="order__price"><b>实付金额 &yen;{{calculations.totalPrice}}</b></div>
            <div class="order__btn" @click="handleSubmitBtn">提交订单</div>
        </div>
        <div class="mask" v-if="showConfirmDialog">
            <div class="mask__content">
                <div class="mask__content__title">确认离开收银台么?</div>
                <div class="mask__content__desc">请尽快完成支付</div>
                <div class="mask__content__buttons">
                    <div class="mask__content__button" @click="handleCancelBtn">取消订单</div>
                    <div class="mask__content__button" @click="handleConfirmBtn">确认支付</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { useCartEffect } from '../shop/CommonCartPrice'
import { useRoute, useRouter } from 'vue-router'
import { ref } from '@vue/reactivity'
export default {
  name: 'OrderConfirmation',
  setup () {
    const route = useRoute()
    const router = useRouter()
    const shopId = route.params.shopId
    const { changeCartItemInfo, calculations } = useCartEffect(shopId)
    const showConfirmDialog = ref(false)
    const handleBack = () => {
      router.go(-1)
    }
    const handleCancelBtn = () => {
      showConfirmDialog.value = false
    }
    const handleConfirmBtn = () => {

    }
    const handleSubmitBtn = () => {
      showConfirmDialog.value = true
    }
    return {
      changeCartItemInfo, calculations, handleBack, handleCancelBtn, handleConfirmBtn, showConfirmDialog, handleSubmitBtn
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/viriable.scss';
@import '../../style/mixins.scss';
.wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #eee;
    overflow-y: scroll;
    .top {
        height: 1.96rem;
        background-size: 100% 1.59rem;
        background-image: linear-gradient(0deg, rgba(0,145,255,0.00) 4%, #0091FF 50%);
        // 背景不重复
        background-repeat: no-repeat;
        position: relative;
        &__header {
            padding-top: .26rem;
            line-height: .24rem;
            color: $bg-color;
            text-align: center;
            position: relative;
            font-size: .16rem;
            &__back {
                position: absolute;
                font-size: .22rem;
                left: .18rem;
            }
        }
        &__receiver {
            position: absolute;
            left: .18rem;
            right: .18rem;
            bottom: 0;
            height: 1.11rem;
            background: $bg-color;
            border-radius: .04rem;
            &__title {
                line-height: .22rem;
                padding: .16rem 0 .14rem .16rem;
                font-size: .16rem;
                color: #333;
            }
            &__address {
                padding: 0 .14rem 0 .16rem;
                color: #333;
                font-size: .14rem;
                line-height: .2rem;
                @include ellipsis
            }
            &__info {
                padding: .06rem 0 0 .16rem;
                &__name {
                    margin-right: .06rem;
                    line-height: .18rem;
                    color: #666;
                    font-size: .12rem;
                }
                &__phone {
                    color: #666;
                    font-size: .12rem;
                }
            }
            &__icon {
                position: absolute;
                right: .16rem;
                top: .5rem;
                color: #666;
                font-size: .2rem;
                transform: rotate(180deg);
            }
        }
    }
    .products {
        margin: .16rem .18rem .1rem .18rem;
        background: $bg-color;
        &__title {
            padding: .16rem;
            font-size: .16rem;
            color: $content-fontcolor;
        }
        &__wrapper {
            overflow-y: scroll;
            margin: 0 .18rem;
            position: absolute;
            left: 0;
            right: 0;
            bottom: .6rem;
            top: 2.6rem;
        }
        &__list {
            overflow-y: scroll;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background: $bg-color;
        }
        &__item {
            position: relative;
            display: flex;
            padding: 0 .16rem 0.16rem .16rem;
            &__img {
                width: .46rem;
                height: .46rem;
                margin-right: .16rem;
            }
            &__detail {
                flex: 1;
            }
            &__title {
                margin: 0;
                line-height: .2rem;
                font-size: .14rem;
                color: $content-fontcolor;
                @include ellipsis;
            }
            &__price {
                display: flex;
                margin: .06rem 0 0 0;
                line-height: .2rem;
                font-size: .14rem;
                color: #ccc;
            }
            &__total {
                flex: 1;
                text-align: right;
                color: #ccc;
            }
            &__yen {
                font-size: .12rem;
            }
        }
    }
    .order {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        display: flex;
        height: .49rem;
        line-height: .49rem;
        background: $bg-color;
        &__price {
            flex: 1;
            text-indent: .24rem;
            font-size: .14rem;
            color: $content-fontcolor;
        }
        &__btn {
            width: .98rem;
            background: $button-bgcolor;
            color: $bg-color;
            text-align: center;
            font-size: .14rem;
        }
    }
    .mask {
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        &__content {
            width: 3rem;
            height: 1.56rem;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: .04rem;
            text-align: center;
            &__title {
                margin: .24rem 0 0 0;
                line-height: .26rem;
                font-size: .18rem;
                color: #333;
            }
            &__desc {
                margin: .08rem 0 0 0;
                font-size: .14rem;
                color: #666666;
            }
            &__buttons {
                margin: .24rem .58rem 0 .58rem;
                display: flex;
            }
            &__button {
                flex: 1;
                width: .8rem;
                line-height: .32rem;
                border: .01rem solid $button-bgcolor;
                border-radius: .16rem;
            }
            &__button:first-child {
                margin-right: .24rem;
                color: $button-bgcolor;
            }
            &__button:last-child {
                background: $button-bgcolor;
                color: $bg-color;
            }
        }
    }
}
</style>
